﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Content_editors_FileManager_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
    <meta name="viewport" content="width=device-width" />
    <title>File Manager [Lê Thanh Tuấn - 0976060432]</title>
    <link href="css/layout.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.9.1.js"" type="text/javascript"></script>
    <script src="js/jquery-ui-1.9.2.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/plugins.js" type="text/javascript"></script>
    <script src="js/jquery.layout.js" type="text/javascript"></script>
    <script src="js/jquery.jstree.js" type="text/javascript"></script>
    <script src="js/jquery.editable.js" type="text/javascript"></script>
    <script src="js/colorlife.js" type="text/javascript"></script>
    
    <script src="js/jquery.hotkeys.js" type="text/javascript"></script>
    <script src="js/bootstrap-contextmenu.js" type="text/javascript"></script>
    <script src="js/uploader/jquery.uploadify.min.js" type="text/javascript"></script>
    <script src="js/uploader/ajaxupload.js" type="text/javascript"></script>
    <script src="js/tinymcepopup.js" type="text/javascript"></script>
   
    <script src="js/filemanager.js" type="text/javascript"></script>
 
</head>
<body>
    <div id="_loading" class="loading">
    </div>
    <div class="ui-layout-north">
        <div class="row-fluid" data-toggle="context" data-target="#context-menu">
            
            <div class="span12">
                <a href="#" onclick="return $.ColorLife.onPageLoad();" style="margin-left:10px"><i class="icon-home"></i></a>
                <a href="javascript:void(0)" id="_back" onclick="return $.ColorLife.prevFolder();"><i class="icon-backward"></i></a>
                <input type="text" class="span11" style="margin-top: 5px" id="txtPath" data-desc="FileFolderPath" />                
            </div>


        </div>
    </div>
    <div class="ui-layout-west">
        <div class="ui-layout-header">
            <span class="ui-layout-header-txt">Folder(s)</span>
        </div>
        <div class="tree-panel" id="MainTree">
        </div>
    </div>
    <div class="ui-layout-south">
        <div id="_itemInfo" class="item-info">
            Hình ảnh
        </div>
    </div>
    <div class="ui-layout-east">
        <div class="ui-layout-header">
            <span class="ui-layout-header-txt">Preview</span>
        </div>
        <div id="_preview">
        </div>
    </div>
    <div class="ui-layout-center">
        <div class="ui-layout-header">
            <div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#" onclick="return $.ColorLife.onPageLoad();"><i class="icon-home"></i></a>
                    <ul class="nav">
                        <li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"><i class="icon-cog"></i>&nbsp;Manage<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#myModalNewFolder" data-toggle="modal"><i class="icon-folder-open"></i>&nbsp; New Folder</a></li>
                                <li><a href="#" class="doUpload"><i class="icon-picture"></i>&nbsp;New Image</a></li>

                                <li class="divider"></li>
                                <li><a href="#"><i class="icon-file"></i>Index Page</a></li>
                                <li><a href="#"><i class="icon-file"></i>Normal Page</a></li>

                                <li class="divider"></li>
                                <li class="dropdown-submenu"><a href="#"><i class="icon-th"></i>&nbsp;Align</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" data-toggle="modal"><i class="icon-th"></i>&nbsp;Icon</a></li>
                                        <li><a href="#" data-toggle="modal"><i class="icon-list"></i>&nbsp;List</a></li>

                                    </ul>

                                </li>
                                <li class="dropdown-submenu"><a href="#"><i class="icon-filter">&nbsp;</i> Sort</a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Name</a></li>
                                        <li><a href="#">Date</a></li>
                                        <li><a href="#">Size</a></li>

                                    </ul>
                                </li>

                                <li><a href="#myModalDelete" data-toggle="modal" id="quickDelete" style="display: none"><i class=" icon-remove"></i>&nbsp;Delete</a></li>

                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="doUpload"><i class="icon-arrow-up"></i>&nbsp;Upload</a>
                        </li>

                        <li>
                            <a href="javascript:void(0)" onclick="return $.ColorLife.refresh();"><i class="icon-refresh"></i></a>
                        </li>
                        <li>
                            <a href="#myModalHelp" data-toggle="modal"><i class="icon-question-sign"></i></a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div id="_fileContainer" class="ui-layout-content">
        </div>
    </div>

    <div id="myModalNewFolder" style="width: 460px" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="form-inline">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Create Folder</h3>
            </div>
            <div class="modal-body">

                <label for="txtFolderName">Name:</label>
                <input type="text" name="txtFolderName" id="txtFolderName" value="NewFolder" class="span5" required="required" />

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" aria-hidden="true" id="btnCreateFolder">Create</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            </div>
        </div>
    </div>
    <div id="myModalHelp" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">COLOR LIFE File Manager</h3>
        </div>
        <div class="modal-body">
            <p>
                <h4>Author</h4>
                Lê Thanh Tuấn
                <br />
                tuanitpro@gmail.com<br />
                faceboob.com/tuanitpro<br />
                Mobile: 0976060432
                <br />
                Skype: tuan.itpro
            </p>
            <p>
                <b>Shortcut Key</b><br />
                H: Help | F5: Refresh | Backspace: Back | Del: Delete | Ctrl + U: Upload
            </p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
        </div>
    </div>
    <div id="myModalDelete" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-body">
            <div class="question"></div>
            <div id="deleteConfirm"></div>
        </div>
        <div class="modal-footer">
            <button id="btnDelete" class="btn btn-primary" aria-hidden="true">OK</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>

    <div id="myModalUpload" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Upload File(s)</h3>
        </div>
        <div class="modal-body">
            <label>Browse your computer for the file to upload</label>
            <input type="file" id="file-upload-dialog">
            <div id="queue"></div>

            <div class="alert alert-info" style="display: none">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <span class="rseult"></span>
            </div>
            <br />
            <label>Enter file web address</label>
            <div class="input-append">
                <input class="span6" id="txtSaveFileToServer" type="text">
                <button class="btn" type="button" id="btnSaveFileToServer">Save</button>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn btn-primary" id="btnUpload" aria-hidden="true">OK</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>
    <div id="myModalImage" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 640px">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Preview</h3>
        </div>
        <div class="modal-body">
            <img id="imgmodal" src="" style="width: auto" />
        </div>

        <div class="modal-footer">
            <button class="btn btn-warning" id="btnEdit" aria-hidden="true">
                <i class="icon-pencil"></i>Edit</button>
            <button class="btn btn-primary" id="btnInsert" aria-hidden="true">Insert</button>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>
    <!-- CONTEXT MENU -->
    <div id="context-menu">
        <ul class="dropdown-menu" role="menu">
            <li><a tabindex="-1" href="#" onclick="return $.ColorLife.openCommand();"><i class="icon-eye-open"></i>View</a></li>
            <li><a tabindex="-1" href="#" onclick="return $.ColorLife.openCommand1();"><i class="icon-pencil"></i>Edit</a></li>
            <li><a tabindex="-1" href="#" onclick="return $.ColorLife.clickToReName();"><i class=" icon-text-height"></i>Rename</a></li>
            <li><a tabindex="-1" href="#" onclick="return $.ColorLife.openCommand1();"><i class="icon-download-alt"></i>Download</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#"><i class="icon-folder-file"></i>Copy</a></li>
            <li><a tabindex="-1" href="#"><i class="icon-eye-move"></i>Cut</a></li>
            <li><a tabindex="-1" href="#"><i class="icon-folder-open"></i>Past</a></li>

            <li class="divider"></li>
            <li>
                <a href="#myModalDelete" data-toggle="modal"><i class=" icon-remove"></i>Delete</a>
            </li>
        </ul>
    </div>
    <div id="context-menu2">
        <ul class="dropdown-menu" role="menu">
            <li><a tabindex="-1" href="#" onclick="return $.ColorLife.refresh();"><i class="icon-refresh"></i>Refresh</a></li>

            <li class="divider"></li>
            <li><a tabindex="-1" href="#" class="doUpload"><i class="icon-folder-open"></i>Upload file(s)</a></li>
            <li><a tabindex="-1" href="#myModalNewFolder" data-toggle="modal"><i class="icon-folder-open"></i>New Folder</a></li>
            <li><a tabindex="-1" href="#"><i class="icon-file"></i>New File</a></li>
            <li><a tabindex="-1" href="#"><i class="icon-ok-circle"></i>Past</a></li>
        </ul>
    </div>
    <!-- END -->
</body>
</html>
